<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
  <title>会员注册</title>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css"  media="all">
  
</head>
<body>
<!-- <button class="layui-btn layui-btn-danger"  id="member-list">返回上一级</button> -->
<h1 type="text" id="registerWay" style="margin-left:20px;">欢迎来到微信注册</h1>
<form name="form" class="layui-form" style="margin-top: 20px;" method="post" action="">
	<div class="layui-form-item">
	   <div class="layui-inline">	
	     <label class="layui-form-label" style="color:#F00">微信</label>
	  <div class="layui-input-inline">
	    <input type="text" name="openid" placeholder="请输入" maxlength="50" value="<%= request.getSession().getAttribute("openid")%>" autocomplete="off" class="layui-input" id="memberPhoneverify">
	  </div>
	</div>
	<div class="layui-inline">
	 <label class="layui-form-label" style="color:#F00">微信昵称</label>
	   <div class="layui-input-inline">
	     <input type="text" name="nickname" placeholder="请输入验证码" maxlength="50" value="<%= request.getSession().getAttribute("nickname")%>" autocomplete="off" class="layui-input">
	   </div>
	  </div>
	</div>
  
   <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">手机号码</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" placeholder="请输入" maxlength="50" lay-verify="required|phone"  autocomplete="off" class="layui-input" id="memberPhoneWxverify">
        <a id="verifyWxphone" style="display: none;">The mobile phone number you entered is not correct, please re-enter it!</a>
      </div>
    </div>
    <div class="layui-inline">
	    <label class="layui-form-label" style="color:#F00">手机验证码</label>
	    <div class="layui-input-inline">
	      <input type="text" name="moblie-code" placeholder="请输入验证码" maxlength="50" lay-verify="required"  autocomplete="off" class="layui-input">
	      <a id="verifyWxcode" style="display: none;">The verification code you entered is not correct, please re-enter it!</a>
	    </div>
	    <button class="layui-btn" data-type="btnAdd" id="phoneRcode">获取手机验证码</button>
    </div>
  </div>
  
  <div class="layui-form-item">
   	<div class="layui-inline">
      <label class="layui-form-label" style="color:#F00">姓名</label>
      <div class="layui-input-inline">
        <input type="text" name="username"  value="" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input" id="memberuserverify">
      </div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">性别</label>
	    <div class="layui-input-block">
	      <input type="radio" name="gender" value="男" title="男">
	      <input type="radio" name="gender" value="女" title="女" checked>
	    </div>
	</div>
  	<div class="layui-inline" style="display: none;">
  		<label class="layui-form-label">注册方式</label>
    	<div class="layui-input-block">
	      <input type="radio" name="registerWay" value="8" title="微信注册" checked>
	    </div>
	</div>
	</div>
	
  <div class="layui-form-item">
	  <div class="layui-inline">
	   <label class="layui-form-label" style="color:#F00">选证件类型</label>
	   <div class="layui-input-block">
	     <select name="idType"  lay-verify="required">
	       <option value=""></option>
	       <option value="0">身份证</option>
	     </select>
	   </div>
	 </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="color:#F00">证件号码</label>
    <div class="layui-input-block">
      <input type="text" name="idNumber" placeholder="请输入" lay-verify="required|identity" autocomplete="off" class="layui-input" />
    </div>
  </div>
  
  
  <!-- 按钮组 -->
  <div class="layui-form-item">
	<div class="layui-input-block">
		<button class="layui-btn" lay-submit="" lay-filter="btnSubmit" id="btnSunmitMember">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
  </div>
</form>
 
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/layui/layui.js" charset="utf-8"></script>
<script>
var times = 120;
layui.use(['form', 'layedit', 'laydate','jquery'], function(){
	  var form = layui.form;
	  var $ = layui.jquery;
	  var layer = layui.layer;
	  var layedit = layui.layedit;
	  var laydate = layui.laydate;
  
	  
	  function roof(){
          if(times == 0){
              $('#phoneRcode').text('发送验证码('+times+'s)');
              //$('#phoneRcode').prop('disabled',false);
              $("#phoneRcode").removeClass("layui-btn-disabled").prop('disabled',false);
              $('#phoneRcode').text('发送验证码');
              $("#memberPhoneWxverify").prop('disabled',false);
              times = 120;
              return
          }
          $('#phoneRcode').text('发送验证码('+times+'s)');
          times--;

          setTimeout(roof,1000);
      }
	  	function sendToPhone(phone){
			$.getJSON("<%=request.getContextPath()%>/verify/sendThesms.do",{"phone":phone},function(result){
			  console.log(result);
			  if(result.state==1){
				  layer.msg(result.message)
			  }else{
				  layer.msg(result.message)
			  }
			});
		}
	  	
	  	$('#phoneRcode').on('click',function(){
			alert(1)
			var phone = $("#memberPhoneWxverify").val()
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        	if(!phone){
				$("#verifyWxphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码不能为空，请输入！";
        	}else if(!myreg.test(phone)){
				$("#verifyWXphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码格式不正确，请重新输入！";
        	}else{
				$("#verifyWXphone").attr("style","display: none;")
	            $(this).prop('disabled',true);
	            $("#memberPhoneWxverify").prop('disabled',true);
	            roof();
	            
	            sendToPhone(phone);
	            
        	}
            
        });
	  /* $("#btnSunmitMember").on("click",function(){
		  doAddW(); 
	  }); */
	  $("#memberuserverify").blur(function(){
		  var username = $("#memberuserverify").val();
		  if(username == ''){
			  
		  }else{
		 $.ajax({
			url : 'verUser.do' 
			,type:'post'
			,dataType:'json'
			,data : {username : username}
			,success:function(result){
				//console.log(result)
				if(result.code == 1){
					layer.msg(result.msg)
				}else if(result.code == 0){
					pubUtil.msg(result.msg,layer,2,function(){
						location.reload()
					});
				}
			}
		 });
		  }
	  });  
	  
	  $("#memberPhoneverify").blur(function(){
	   	  var phone = $("#memberPhoneverify").val();
	   	  if (phone == '') {
			
		}else if(!(/^1[3456789]\d{9}$/.test(phone))){
			layer.msg("请输入正确手机号")
		}
	   	  else{
	   	 $.ajax({
	   		url : 'verPho.do' 
	   		,type:'post'
	   		,dataType:'json'
	   		,data : {phone : phone}
	   		,success:function(result){
	   			//console.log(result)
	   			if(result.code == 1){
	   				layer.msg(result.msg)
	   			}else if(result.code == 0){
	   				pubUtil.msg(result.msg,layer,2,function(){
	   					location.reload()
	   				});
	   			}
	   		}
	   	 });
		}
	    });  
	  
	  
	  form.on('submit(btnSubmit)',function(data){
		  var index = layer.load(1);//开启进度条
		  $.ajax({
				url : 'doAddWx.do',
				data :data.field,
				type:'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
				dataType : 'json',
				success : function(obj) {
					layer.close(index);//关闭   
					if (obj.state == 1) {
						pubUtil.msg(obj.message,layer,1,function(){
							$("#close").click();
							window.location.href = "<%=request.getContextPath()%>/sysby/member/memberBI.do" 
						},500);
					} else {
						pubUtil.msg(obj.message,layer,2,function(){
							alert(obj.message)
							$("#close").click();
						},5*1000);
					}
					}
				});
		  	return false;
	  });
	  
	 
	  
	 
	  
	  
	  
	  
  //监听提交
 /*  form.on('submit(btnSubmit)', function(data){
	var index = layer.load(1);//开启进度条
    $.ajax({
			url : 'menuInf/add.do',
			data :data.field,
			type:'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
			dataType : 'json',
			success : function(obj) {
				console.log(obj)
				layer.close(index);//关闭   
				if (obj.success) {
					pubUtil.msg(obj.msg,layer,1,function(){
						$("#close").click();
					},500);
				} else {
					pubUtil.msg(obj.msg,layer,2,function(){
						
					},5*1000);
				}
			}
		});
    return false;
  }); */
  
});

//按钮的点击事件
/* $('button#treeSelect').on('click', function() {
	parent.layer.open({
	      type: 2,
	      title : '选择<span style="color:red">[请单击选中]</span>',
	      shadeClose: false,//点击遮罩关闭
	      anim: public_anim,
	      btnAlign: 'c',
	      shade: public_shade,//是否有遮罩，可以设置成false
	      maxmin: true, //开启最大化最小化按钮
	      area: ['600px', '300px'],
	      //area: ['100%', '100%'],
	      boolean:true,
		  content: ['MenuInfoTree.jsp', 'yes'], //iframe的url，no代表不显示滚动条
		  btn: ['选择', '关闭']
		  ,yes: function(index,layero) {
			  var body=$(layero).find("iframe")[0].contentWindow.document;
			  var pid = body.getElementById("id").value;
			  var pidNm = body.getElementById("name").value;
			  $("#pidNm").val(pidNm);
			  $("#pid").val(pid);
			  parent.layer.close(index); //关闭当前弹层
		  }
		  ,btn2: function(index, layero){
			  
		  }
	    });
}); */
</script>

</body>
</html>